<template>
	<div>
		<el-row>
			<p class="p">type：</p>
			<el-button>默认按钮</el-button>
			<el-button type="primary">主要按钮</el-button>
			<el-button type="success">成功按钮</el-button>
			<el-button type="info">信息按钮</el-button>
			<el-button type="warning">警告按钮</el-button>
			<el-button type="danger">危险按钮</el-button>
		</el-row>
		<el-row>
			<p class="p">plain：朴素按钮</p>
			<el-button plain>默认按钮</el-button>
			<el-button type="primary" plain>主要按钮</el-button>
			<el-button type="success" plain>成功按钮</el-button>
			<el-button type="info" plain>信息按钮</el-button>
			<el-button type="warning" plain>警告按钮</el-button>
			<el-button type="danger" plain>危险按钮</el-button>
		</el-row>
		<el-tree
			:data="data"
			show-checkbox
			default-expand-all
			node-key="id"
			ref="tree"
			highlight-current
			:props="defaultProps"
		>
		</el-tree>
		<div class="buttons">
			<el-button @click="getCheckedNodes">通过 node 获取</el-button>
			<el-button @click="getCheckedKeys">通过 key 获取</el-button>
			<el-button @click="setCheckedNodes">通过 node 设置</el-button>
			<el-button @click="setCheckedKeys">通过 key 设置</el-button>
			<el-button @click="resetChecked">清空</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		methods: {
			getCheckedNodes() {
				console.log(this.$refs.tree.getCheckedNodes())
			},
			getCheckedKeys() {
				console.log(this.$refs.tree.getCheckedKeys())
			},
			setCheckedNodes() {
				this.$refs.tree.setCheckedNodes([
					{
						id: 4
					},
					{
						id: 5
					}
				])
			},
			setCheckedKeys() {
				this.$refs.tree.setCheckedKeys([4])
			},
			resetChecked() {
				this.$refs.tree.setCheckedKeys([])
			}
		},

		data() {
			return {
				data: [
					{
						id: 1,
						label: '一级 1',
						children: [
							{
								id: 4,
								label: '二级 1-1',
								children: [
									{
										id: 9,
										label: '三级 1-1-1',
										number: '9'
									},
									{
										id: 10,
										label: '三级 1-1-2'
									}
								]
							}
						]
					},
					{
						id: 2,
						label: '一级 2',
						children: [
							{
								id: 5,
								label: '二级 2-1',
								number: '5'
							},
							{
								id: 6,
								label: '二级 2-2'
							}
						]
					},
					{
						id: 3,
						label: '一级 3',
						children: [
							{
								id: 7,
								label: '二级 3-1'
							},
							{
								id: 8,
								label: '二级 3-2'
							}
						]
					}
				],
				defaultProps: {
					children: 'children',
					label: 'label'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.el-button {
		margin: 0 5px;
	}
	.p {
		padding: 5px 5px;
		background-color: #ccc;
		margin: 5px 0;
	}
</style>
